<template>
	<P>吴优的成绩：</P>
	<div v-show="type==='A'">优秀</div>
	<div v-show="type==='B'">良好</div>
	<div v-show="type==='C'">及格</div>
	
	<button @click="type='A'">A:切换为优秀</button>
	<button @click="type='B'">B:切换为良好</button>
	<button @click="type='C'">C:切换为及格</button>
</template>

<script setup>
	import { ref } from 'vue'
	//v-show与v-if都用来决定某一个元素是否在页面上显示出来。
	//v-show的原理是通过为元素添加或移除display: none样式来实现元素的显示或隐藏。
	//当需要频繁切换某个元素的显示或隐藏时，使用v-show会更节省性能开销；
	//而当只需要切换一次显示或隐藏时，使用v-if更合理
	const type=ref('A')
</script>

<style>
</style>